<template>
  <div>
    <hr />
    <h1>root：{{ $store.state.counter }}</h1>
    <h1>user：{{ $store.state.user.userCounter }}</h1>
    <h1>home：{{ $store.state.home.homeCounter }}</h1>
    <hr />
    <h2>user-getters：{{ $store.getters["user/doubleUserCounter"] }}</h2>
    <button @click="userCounter">+1</button>
    <button @click="userActions">user-actions：+1</button>
  </div>
</template>
<script>
export default {
  methods: {
    userCounter() {
      this.$store.commit("user/increment");
    },
    userActions() {
      this.$store.dispatch("user/incrementActions");
    },
  },
};
</script>
<style>
</style>
